﻿//页面加载完成事件
$(function () {
    //定义loading 开启和关闭的方法
    var loadingTime = 5;
    showLoading = function (loadText) {
        if (!loadText) {
            $("#loadText").html(loadText)
        }
        $('#loadingModal').modal({ backdrop: 'static', keyboard: false });
    }
    hideLoading = function () {
        $('#loadingModal').modal('hide');
    }
    //调用这个方法
    Page_load()
    //定义一个方法 Page_load
    function Page_load() {
        showLoading("数据加载中。。。。")
        //Ajax来获取
        $.ajax({
            type:"Get",//请求方式
            url: "FoodsController.ashx",//网页在项目中
            contentType: "application/json", //如果提交的是json数据类型，则必须有此参数,表示提交的数据类型 
            dataType: "json", //表示返回值类型，不必须
            data: { },//传参数
            success: function (jsonResult) {
                ShowFoods(jsonResult)
                //关闭loading
                hideLoading()
            },
        });
        
    }


    //搜索按钮的单击事件
    $(".btn_Search").on('click', function () {
        showLoading("数据加载中。。。。")
        //取用户输入的关键词
        var keyWords = $("input[name='keyWords']").val();
        //数据库查询
        $.ajax({
            type: "Get",
            url: "FoodsController.ashx",
            contentType: "application/json", 
            dataType: "json", 
            data: { "type": "SearchFoods", "keyWords": keyWords},
            success: function (jsonResult) {          
                ShowFoods(jsonResult)             
                hideLoading()
            },
        });
    })

    //给表格添加数据
    function ShowFoods(jsonResult) {
        $("tbody").html("");
        for (var i = 0; i < jsonResult.length; i++) {
            $("tbody").append(`<tr>
                        <td>${i+1}</td>
                        <td>${jsonResult[i].FoodsName}</td>
                        <td>${jsonResult[i].FoodsDesc}</td>
                        <td>
                            <img src="../images/foods/${jsonResult[i].FoodsImg}" height="20"/>
                        </td>
                        <td>${jsonResult[i].CreateTime}</td>
                        <td>
                            <button type="button" class="btn btn-danger">编辑</button>
                            <button type="button" class="btn btn-warning btn_DelFoods">删除</button>
                            <input type="hidden" value="${jsonResult[i].FoodsID}" >
                        </td>
                    </tr>`);
        }
    }

    $("body").on('click','.btn_DelFoods', function () {
        var foodsId = $(this).next().val();
        $("input[name='delFoods']").val(foodsId);
        $("#DelModal").modal('show');
    })

    //确认删除按钮的单击事件
    $('.btn_ConfirmDel').on('click', function () {
        var foodsId = $("input[name='delFoods']").val();
        //alert(foodsId)
        $.ajax({
            type: "Get",
            url: "FoodsController.ashx",
            contentType: "application/json", 
            dataType: "json", 
            data: { "type": "DelFoods", "foodsId": foodsId },//传参数
            success: function (jsonResult) {
                $("#DelModal").modal('hide');
                //当删除成功 进行刷新
                if (jsonResult.Success) {
                    //提示成功
                    toastr.success(jsonResult.ErrorMsg);
                    //查询所有美食
                    Page_load()
                } else {
                    //提示错误
                    toastr.error(jsonResult.ErrorMsg);
                }
            },
        });
    })


})